<!-- <template>
  <editor :init="editorInit" style="min-height:500px;width:100%" v-model="tinyContent" id="editor" @paste="paste" />
</template>
<script lang="ts" setup>
import { onMounted, ref, nextTick } from 'vue'
const props = defineProps({
  content: {
    type: String,
    default: ''
  }
})

const imageHandler = (blobInfo:any, progress:any) => new Promise((resolve, reject) => {
  const file = blobInfo.blob()// 转化为易于理解的file对象
  const xhr = new XMLHttpRequest()
  xhr.withCredentials = false
  xhr.open('POST', import.meta.env.VITE_UPLOAD_IMG_API)
  xhr.upload.onprogress = (e) => {
    progress(e.loaded / e.total * 100)
  }
  xhr.onload = function () {
    if (xhr.status !== 200) {
      // eslint-disable-next-line prefer-promise-reject-errors
      reject('HTTP Error:' + xhr.status)
      return
    }
    const json = JSON.parse(xhr.responseText)
    resolve(json)
  }
  const formData = new FormData()
  formData.append('image', file, file.name)
  xhr.send(formData)
}
)

const init = {
  plugins: 'lists link image table code help wordcount powerpaste',
  images_file_types: 'jpg,jpeg,png,gif',
  images_upload_handler: imageHandler,
  powerpaste_allow_local_images: true,
  external_plugins: {
    powerpaste: '/plugins/powerpaste/plugin.min.js' // 注意这里路径一定要写对
  }
}
const editorInit = ref(init)
const tinyContent = ref('')
onMounted(() => {
  tinyContent.value = props.content
})
const getBase64ByURL = (imgUrl:string) => {
  return new Promise(resolve => {
    window.URL = window.URL || window.webkitURL
    const xhr = new XMLHttpRequest()
    xhr.open('get', imgUrl, true)
    xhr.responseType = 'blob'
    xhr.onload = function () {
      if (this.status === 200) {
        const blob = this.response
        const oFileReader = new FileReader()
        oFileReader.onloadend = function (e) {
          resolve({ blob })
        }
        oFileReader.readAsDataURL(blob)
      }
    }
    xhr.send()
  })
}
const paste = () => {
  nextTick(() => {
    const primaryImgs:Array<string> = []
    const transImgs:Array<string> = []
    let result = null
    const pattern = /<img [^>]*src=['"]([^'"]+)[^>]*>/g
    do {
      result = pattern.exec(tinyContent.value)
      if (result) {
        primaryImgs.push(result[1])
      }
    } while (result)
    // getBase64ByURL(primaryImgs[0]).then((res:any) => {
    //   const { blob } = res
    //   const myFile = new File([blob], `111.${blob.type.split('/')[1]}`, {
    //     type: blob.type
    //   })
    //   const formData = new FormData()
    //   formData.append('image', myFile)
    //   const xhr = new XMLHttpRequest()
    //   xhr.open('POST', import.meta.env.VITE_UPLOAD_IMG_API)

    //   xhr.onload = function () {
    //     if (xhr.status !== 200) {
    //       // eslint-disable-next-line prefer-promise-reject-errors

    //       return
    //     }
    //     const json = JSON.parse(xhr.responseText)
    //   }
    //   xhr.send(formData)
    // })
    console.log()
  })
}
</script> -->
